import React from 'react'
import uuid from 'uuid'
import PropTypes from 'prop-types'
import * as AlertUtil from '../../../public/js/alertUtil'
import * as FormUtil from '../../../public/js/formUtil'
import * as StringUtils from '../../../public/js/stringUtils'

class SetMenu extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            treeId: uuid.v4()
        }
    }

    initTree() {
        let option = {
            data: {
                key: {
                    name: "name",
                    title: "name"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            view: {
                selectedMulti: true
            },
            check: {
                enable: true,
                chkboxType: { "Y": "ps", "N": "s" }
            }

        };

        let url = domainName + "/menus/getMenuByRoleId/" + this.props.roleId
        FormUtil.getData(url, {}, (response) => {
            let tree = $.fn.zTree.init($("#" + this.state.treeId), option, response)
            tree.expandAll(true)
        })
    }

    componentDidMount() {
        this.initTree()
        $('#' + this.props.modalId).on('shown.bs.modal', () => {
            this.initTree()
        })
    }

    save() {
        let treeId = this.state.treeId,
            tree = $.fn.zTree.getZTreeObj(treeId), nodes = tree.getCheckedNodes(true), menuIds = []

        for (let i = 0; i < nodes.length; i++) {
            menuIds.push(nodes[i].id)
        }
        let url = domainName + '/menus/toRole', data = {
            menuIds: menuIds.join(','),
            roleId: this.props.roleId
        }
        FormUtil.submit(url, data, () => {
            AlertUtil.alert('提示', '设置菜单成功!',()=>{
                $('#' + this.props.modalId).modal('hide')
            })
            
        })
    }

    render() {
        return (
            <div>
                <div className="modal fade" id={this.props.modalId} role="dialog">
                    <div className="modal-dialog modal-lg">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h4 className="modal-title">设置菜单</h4>
                                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div className="modal-body">
                                <div className="row">
                                    <div className="col-md-12" style={{ background: '#fff'}}>
                                        <ul className="ztree" id={this.state.treeId} />
                                    </div>
                                </div>
                            </div>
                            <div className="modal-footer">
                                <div className="form-group text-right">
                                    <button className="btn btn-info btn-sm waves-effect waves-light m-r-5" onClick={this.save.bind(this)}>保存</button>
                                    <button type="button" className="btn btn-dark btn-sm waves-effect waves-light" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

SetMenu.propTypes = {
    modalId: PropTypes.string.isRequired,
    roleId: PropTypes.number
}

export default SetMenu